<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        li{
            list-style:none;
        }
        img{
            vertical-align: top;
        }
        .swiper{
            width: 1226px;
            margin: 50px auto;
            border: 1px solid #333;
            position: relative;
            
            .swiper-wrapper{
                display: flex;
                width: fit-content; 
                position: relative;

                .swiper-item{
                    width: 1226px;

                    & img{
                        width: 100%;
                    }
                }
            }

            .swiper-pagination{
                display: flex;
                position: absolute;
                right: 50px;
                bottom: 20px;

                & li{
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: aliceblue;
                    border: 1px solid rgba(0,0,0,0.5);
                    margin: 0 5px;

                }
                .active{
                    background-color: aquamarine;
                }
            }


        }
        
    </style>
</head>
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-item"><img src="../images/1.png" alt=""></div>
            <div class="swiper-item"><img src="../images/2.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/3.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/4.webp" alt=""></div>
        </div>
        <ul class="swiper-pagination">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>